{
 "cells": [
  {
   "attachments": {},
   "cell_type": "markdown",
   "id": "e7778e85-2b10-499a-9679-77f6ba5a3ffc",
   "metadata": {},
   "source": [
    "Datapane enables you to can change the font, background color and text alignment to match your brand guidelines or personal aesthetics. \n",
    "Simply override the default styling properties by passing in a `Formatting` object as follows:\n",
    "\n",
    "```python\n",
    "import datapane as dp\n",
    "\n",
    "view = dp.View(\"Test Message\")\n",
    "\n",
    "dp.save_report(\n",
    "    view,\n",
    "    path=\"styling-python-api.html\",\n",
    "    formatting=dp.Formatting(\n",
    "        light_prose=False,\n",
    "        accent_color=\"orange\",\n",
    "        bg_color=\"#EEE\",\n",
    "        text_alignment=dp.TextAlignment.RIGHT,\n",
    "        font=dp.FontChoice.MONOSPACE,\n",
    "        width=dp.Width.MEDIUM,\n",
    "    )\n",
    ")\n",
    "```"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "702ba616",
   "metadata": {
    "tags": [
     "remove_input"
    ]
   },
   "outputs": [],
   "source": [
    "import datapane as dp\n",
    "from IPython.display import display, HTML\n",
    "\n",
    "x = dp.stringify_report(\n",
    "    dp.View(\"Test Message\"), \n",
    "    formatting=dp.Formatting(\n",
    "        light_prose=False,\n",
    "        accent_color=\"orange\",\n",
    "        bg_color=\"#EEE\",\n",
    "        text_alignment=dp.TextAlignment.RIGHT,\n",
    "        font=dp.FontChoice.MONOSPACE,\n",
    "        width=dp.Width.MEDIUM,\n",
    "    )\n",
    ")\n",
    "display(HTML(x))"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "id": "556551c7-bfb7-410b-b068-425b95c97a64",
   "metadata": {},
   "source": [
    "There are currently six styling properties supported:\n",
    "\n",
    "**1. Light Prose**\n",
    "\n",
    "Boolean which controls whether the text appears as light (good for dark mode), or dark (default).\n",
    "\n",
    "**2. Accent Color**\n",
    "\n",
    "Controls the color of certain UI elements e.g. page titles, selects, DataTable headings. Can be any of the [140 CSS colour names](https://htmlcolorcodes.com/color-names/) or an RGB hex code.\n",
    "\n",
    "**3. Background Color**\n",
    "\n",
    "Controls the background color - can be any of the [140 CSS colour names](https://htmlcolorcodes.com/color-names/) or an RGB hex code.\n",
    "\n",
    "**4. Text Alignment**\n",
    "\n",
    "Controls how the text is aligned - can be any of `JUSTIFY`, `LEFT` (default),   `RIGHT`, `CENTER`.\n",
    "\n",
    "**5. Font**\n",
    "\n",
    "Controls the font for the prose text - can be any of `DEFAULT`, `SANS`, `SERIF`, `MONOSPACE`.\n",
    "\n",
    "**6. Width**\n",
    "\n",
    "Controls the horizontal width - can be any of `NARROW`, `MEDIUM` (default), `FULL`."
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}
